<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="p1" class="p2">这是一段文本内容</p>
    <script>
        const p1 = document.getElementById('p1');
        const p2 = document.querySelector('.p2');
        p1.addEventListener('click', function() {
            alert('您点击了p1');
        });
        p2.addEventListener('click', function() {
            alert('您点击了p2');
        });
        p1.addEventListener('dblclick', function() {
            alert('您双击了p1');
        });
        p2.addEventListener('dblclick', function() {
            alert('您双击了p2');
        });
        p1.addEventListener('contextmenu', function(e) {
            e.preventDefault();
            alert('您按下了右键并在p1上');
        });
        p2.addEventListener('contextmenu', function(e) {
            e.preventDefault();
            alert('您按下了右键并在p2上');
        });
        p1.addEventListener('mousedown', function(e) {
            alert(`您按下了 ${e.button === 0? '左键' : e.button === 1? '中键' : '右键'} 在 p1上`);
        });
        p2.addEventListener('mousedown', function(e) {
            alert(`您按下了 ${e.button === 0? '左键' : e.button === 1? '中键' : '右键'} 在 p2上`);
        });
    </script>
</body>
</html>